<!-- 左右布局编辑 -->
<template>
  <container-wrapper :designer="designer"
    :widget="widget"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList">
    <div :key="widget.id"
      class="layout-container"
      @click.stop="selectWidget(widget)"
      :style="{width: widget.options.cardWidth + '!important' || ''}"
      :class="[selected ? 'selected' : '', customClass]">
      <el-container :class="ns.b()"
        :style="{ padding: '8px', background: '#fff', paddingTop:'8px','min-height': `${minHeight-10}px`,height:'100%' }">
        <el-container style="position: relative">
          <div :class="ns.b('content')">
            <div :class="ns.b('aside')"
              v-show="isAside==true && setAside==true"
              :style="{ '--var-aside-width': planWidth }">
              <el-aside v-show="showAside"
                :class="ns.be('aside', 'body')"
                :width="planBasicWidth">
                <draggable :list="widget.leftLists"
                  item-key="id"
                  v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
                  handle=".drag-handler"
                  tag="transition-group"
                  :component-data="{name: 'fade'}"
                  @add="(evt) => onContainerDragAdd(evt, widget.leftLists)"
                  @update="onContainerDragUpdate"
                  :move="checkContainerMove">
                  <template #item="{ element: subWidget, index: swIdx }">
                    <div :class="[
                        'layout-edit-padding',
                        'form-widget-list',
                        widgetFullHeightClass(subWidget.type, 'aside')
                      ]">
                      <template v-if="'container' === subWidget.category">
                        <component :is="subWidget.type + '-widget'"
                          :widget="subWidget"
                          :designer="designer"
                          :key="subWidget.id"
                          :parent-list="widget.leftLists"
                          :index-of-parent-list="swIdx"
                          :parent-widget="widget"></component>
                      </template>
                      <template v-else>
                        <component :is="subWidget.type + '-widget'"
                          :field="subWidget"
                          :designer="designer"
                          :key="subWidget.id"
                          :parent-list="widget.leftLists"
                          :index-of-parent-list="swIdx"
                          :parent-widget="widget"
                          :design-state="true"></component>
                      </template>
                    </div>
                  </template>
                </draggable>
              </el-aside>
              <div ref="asideBlockRef"
                :class="ns.be('aside', 'line')"
                @click.stop.prevent="onLineClick"
                @mousedown.stop.prevent="planMousedDown"
                @mouseup.stop.prevent="planMouseUp">
                <el-icon v-if="showAside">
                  <arrow-left />
                </el-icon>
                <el-icon v-else>
                  <arrow-right />
                </el-icon>
              </div>
            </div>
            <el-container :style="finalMainStyle">
              <el-main :class="ns.b('main-content')"
                :style="{ height:'100%' }">
                <draggable :list="widget.rightLists"
                  item-key="id"
                  v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
                  handle=".drag-handler"
                  tag="transition-group"
                  :component-data="{name: 'fade'}"
                  @add="(evt) => onContainerDragAdd(evt, widget.rightLists)"
                  @update="onContainerDragUpdate"
                  :move="checkContainerMove">
                  <template #item="{ element: subWidget, index: swIdx }">
                    <div :class="[
                        'layout-edit-padding',
                        'form-widget-list',
                        widgetFullHeightClass(subWidget.type, 'content')
                      ]">
                      <template v-if="'container' === subWidget.category">
                        <component :is="subWidget.type + '-widget'"
                          :widget="subWidget"
                          :designer="designer"
                          :key="subWidget.id"
                          :parent-list="widget.rightLists"
                          :index-of-parent-list="swIdx"
                          :parent-widget="widget"></component>
                      </template>
                      <template v-else>
                        <component :is="subWidget.type + '-widget'"
                          :field="subWidget"
                          :designer="designer"
                          :key="subWidget.id"
                          :parent-list="widget.rightLists"
                          :index-of-parent-list="swIdx"
                          :parent-widget="widget"
                          :design-state="true"></component>
                      </template>
                    </div>
                  </template>
                </draggable>
              </el-main>
            </el-container>
          </div>
        </el-container>
        <div v-if="isMove"
          :class="ns.b('panel-mask')"
          @mouseup.stop="planMouseUp"
          @mousemove.stop="planMouseMove"></div>
      </el-container>
    </div>
  </container-wrapper>
</template>

<script >
import { useNamespace } from 'element-plus';
import i18n from "@/utils/i18n"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"
import { ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from '@element-plus/icons-vue'

export default {
  name: "layout-left-right-widget",
  componentName: 'ContainerWidget',
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    ContainerWrapper,
    ...FieldComponents,
    ArrowDown,
    ArrowUp,
    ArrowRight,
    ArrowLeft
  },
  props: {
    field: Object,
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    //是否编辑状态
    designState: {
      type: Boolean,
      default: false
    },
    // 布局主要区域样式(右侧主区域)
    mainStyle: {
      type: Object,
      default: null
    },
    minHeight: { type: Number },
  },
  data() {
    return {
      ns: useNamespace('layout', 'rk'),
      showAside: true,
      asideBlockRef: null,
      planBasicWidth: '300px',
      planWidth: '300px',
      tempWidth: '300px',
      isMove: false,
      moving: false,
      setAside: true
    }
  },
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },
    customClass() {
      return this.widget.options.customClass || 'full-height'
    },
    finalMainStyle() {
      let finalStyle = {
        border: '1px solid #dadada'
      }
      if (this.mainStyle) {
        finalStyle = { ...finalStyle, ...this.mainStyle }
      }
      return finalStyle
    },
    //是否显示Aside面板，默认显示
    isAside() {
      return !this.widget.options.leftRightLayoutAsideHide
    },
  },
  created() {
    this.initRefList()
  },
  mounted() {
    this.initWindowSize()
  },
  methods: {
    /**
     * 提供给外部调用的方法
     * 控制侧边显示隐藏
     * @param {Boolean} state 状态
     */
    setAsdieHidden(state) {
      this.setAside = !state
    },
    /**
     * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
     * @param evt
     * @returns {boolean}
     */
    checkContainerMove(evt) {
      return true
    },
    /**
     * 鼠标松开
     * @param e event
     */
    planMouseUp(e) {
      this.isMove = false;
      this.planBasicWidth = this.planWidth;
      //设置移动中延时关闭
      setTimeout(() => {
        this.moving = false;
      }, 100);
    },
    /**
     * 拖动改变面板大小
     */
    planMousedDown() {
      return this.isMove = true;
    },
    /**
     * 鼠标移动
     * 
     * @param e event
     */
    planMouseMove(e) {
      //鼠标按下且面板不是关闭状态
      if (this.isMove && this.showAside) {
        this.moving = true;
        this.planWidth = `${e.layerX}px`;
        this.tempWidth = `${e.layerX}px`;
      }
    },
    /**
     * 设置宽度
     * 
     * @param width 宽度
     */
    setWidth(width) {
      this.planWidth = width;
      this.tempWidth = width;
      this.planBasicWidth = width;
    },
    onLineClick() {
      if (!this.moving) {
        this.showAside = !this.showAside;
        if (this.showAside) {
          this.planWidth = this.tempWidth;
          this.planBasicWidth = this.tempWidth;
        } else {
          this.planWidth = '0px';
        }
      }
    },
    initWindowSize() {
      // let winWidth = window.innerWidth
      // if ([1920].includes(winWidth)) {
      //   this.setWidth('300px')
      // } else if ([1360, 1366, 1600].includes(winWidth)) {
      //   this.setWidth('300px')
      // }
      this.setWidth('300px')
    },
    /**
     * 获取部件的撑满高度的样式类
     * 
     * @param {String} type 部件类型
     * @returns {String} 样式类
     */
    widgetFullHeightClass(type) {
      return ['zoning-unit-tree', 'data-table'].includes(type) ? 'widget-full-hight' : ''
    }

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/function.scss";

.layout-container.selected {
  outline: 2px solid $--color-primary !important;
}
.layout-container {
  outline: 2px solid #d9d9d9;
  height: 100% !important;
  margin: 2px;

  .form-widget-list {
    min-height: 28px;
    box-sizing: border-box;
  }
  .widget-full-hight {
    height: 100% !important;
  }
}

@include b(layout) {
  height: 100% !important;
  width: 100%;
  position: relative;
  .layout-edit-padding {
    padding: 5px;
  }

  &-panel-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0.3;
    z-index: 80;
  }
  
  &-header {
    display: flex;
  }

  &-header-group {
    display: flex;
    align-content: center;
    align-items: center;
    width: 100%;

    &__left {
      // width: 50%;
      box-sizing: border-box;
      height: 100%;
    }

    &__right {
      // width: 50%;
      margin-left: auto;
      box-sizing: border-box;
      height: 100%;
    }
  }

  &-header-left {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-left-g {
    width: 90%;
    display: flex;
    justify-content: flex-start;
  }

  &-header-right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-right-g {
    width: 90%;
    display: flex;
    justify-content: flex-end;
  }

  &-aside {
    height: 100%;
    //background-color: #0d84ff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: 10px;

    &__body {
      box-sizing: border-box;
      border: 1px solid #dadada;
    }

    &__line {
      position: absolute;
      top: 0;
      width: 10px;
      left: var(--var-aside-width);
      height: 100%;
      cursor: w-resize;
      z-index: 90;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &__line:hover {
      background-color: #eaeaea;
    }
  }

  &-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }

  &-main-content {
    //background-color: #e7746f;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  &-main-footer {
    //background-color: #f8f38b;
    box-sizing: border-box;
    border: 1px solid #dadada;
    border-left: unset;
    border-right: unset;
    border-bottom: unset;
    padding: 0;
    margin: 0;
  }

  &-ex-text-center {
    text-align: center;
    font-size: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

}
</style>
